<template>
  <div class="container">
    <div class="orderlist_info">
      <div class="header">
        <span class="shu"></span>订单信息
      </div>
      <ul class="details">
        <li class="flex">
          <span class="left flex-item">订单编号</span>
          <span class="right">{{order.order_sn}}</span>
        </li>
        <li class="flex">
          <span class="left flex-item">订单时间</span>
          <span class="right">{{order.addtime}}</span>
        </li>
        <li class="flex">
          <span class="left flex-item">消费客户</span>
          <span class="right">{{order.name}}</span>
        </li>
        <li class="flex">
          <span class="left flex-item">消费门店</span>
          <span class="right">{{order.shopname}}</span>
        </li>
        <li class="flex" v-for="(item, index) in order_goods" :key="index">
          <span class="left flex-item" v-if="item.type == 1">
            <span v-if="item.consumetype == 1">[普通]</span>
            <span v-if="item.consumetype == 2">[卡销]</span>
            <span v-if="item.consumetype == 3">[暂存]</span>
            <span>[产品]{{item.typename}}*{{item.num}}</span>
          </span>
          <span class="left flex-item" v-if="item.type == 2">
            <span v-if="item.consumetype == 1">[普通]</span>
            <span v-if="item.consumetype == 2">[卡销]</span>
            <span v-if="item.consumetype == 3">[暂存]</span>
            <span>[项目]{{item.typename}}*{{item.num}}</span>
          </span>
          <span class="left flex-item" v-if="item.type == 3">
            <span v-if="item.consumetype == 1">[普通]</span>
            <span v-if="item.consumetype == 2">[卡销]</span>
            <span v-if="item.consumetype == 3">[暂存]</span>
            <span>[开卡]{{item.typename}}*{{item.num}}</span>
          </span>
          <span class="left flex-item" v-if="item.type == 4">
            <span v-if="item.consumetype == 1">[普通]</span>
            <span v-if="item.consumetype == 2">[卡销]</span>
            <span v-if="item.consumetype == 3">[暂存]</span>
            <span>[充值]{{item.typename}}*{{item.num}}</span>
          </span>
          <span class="left flex-item" v-if="item.type == 5">
            <span v-if="item.consumetype == 1">[普通]</span>
            <span v-if="item.consumetype == 2">[卡销]</span>
            <span v-if="item.consumetype == 3">[暂存]</span>
            <span>[赠送]{{item.typename}}*{{item.num}}</span>
          </span>
          <span class="right">
            <span>￥{{item.amount}}</span>
          </span>
        </li>
      </ul>
    </div>

    <div class="orderlist_info">
      <div class="header">
        <span class="shu"></span>消费信息
      </div>
      <ul class="details">
        <li class="flex">
          <span class="left flex-item">现金消费</span>
          <span class="right">{{order.recemoney}}元</span>
        </li>
        <li class="flex">
          <span class="left flex-item">账户余额消费</span>
          <span class="right">{{order.usebalance}}元</span>
        </li>
        <li class="flex">
          <span class="left flex-item">赠送余额消费</span>
          <span class="right">{{order.usegiftbalance}}元</span>
        </li>
        <li class="flex">
          <span class="left flex-item">次卡消费</span>
          <span class="right">{{order.cardreduce}}元</span>
        </li>
      </ul>
    </div>

    <div class="orderlist_info">
      <div class="header">
        <span class="shu"></span>服务信息
      </div>
      <ul class="details">
        <li class="flex" v-for="(item, index) in fuwu" :key="index">
          <span class="left flex-item">服务员工</span>
          <span class="right">{{item.jobname}}.{{item.name}}</span>
        </li>
      </ul>
    </div>

    <div class="orderlist_info">
      <div class="header">
        <span class="shu"></span>跟单信息
      </div>
      <ul class="details">
        <li class="flex">
          <span class="left flex-item">跟单员工</span>
          <span class="right" v-if="order.gendanname">{{order.jobname}}.{{order.gendanname}}</span>
          <span v-else>无跟单人</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import util from '@/utils/util'
export default {
  data () {
    return {
      order: {},
      order_goods: [],
      fuwu: []
    }
  },

  components: {
  },
  async onLoad () {
    await Promise.all([
      this.getorderinfo(this.$route.query.id)
    ])
  },
  methods: {
    async getorderinfo (orderid) {
      const res = await api.getorderinfo({ orderid: orderid });
      if (res.code === '100') {
        const that = this
        const order = res.order[0]
        order.addtime = util.formatTime(order.addtime)
        that.order = order
        that.order_goods = res.order_goods
        that.fuwu = res.fuwu
      }
    }
  },
  created () {
  }
}
</script>

<style scoped>
.container {
  background: rgba(153, 153, 153, 0.1) !important;
}
.orderlist_info {
  width: 100%;
  background: #fff;
  padding-top: 50rpx;
  padding-bottom: 24rpx;
  padding-left: 48rpx;
  margin-bottom: 20rpx;
}
.orderlist_info .header {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 42rpx;
  color: rgba(51, 51, 51, 1);
}
.orderlist_info .header .shu {
  display: inline-block;
  width: 4rpx;
  height: 20rpx;
  background: rgba(255, 68, 68, 1);
  border-radius: 2rpx;
  margin-right: 12rpx;
}
.orderlist_info .details {
  width: 100%;
}
.orderlist_info .details li {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 74rpx;
  color: rgba(102, 102, 102, 1);
  padding-right: 44rpx;
  position: relative;
  padding-left: 20rpx;
  margin-bottom: 10rpx;
}
.orderlist_info .details li::after {
  width: 100%;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2rpx;
  background: RGBA(153, 153, 153, 0.1);
}
.orderlist_info .details li:last-child::after {
  background: RGBA(153, 153, 153, 0);
}
.orderlist_info .details li .left {
  text-align: left;
}
.orderlist_info .details li .right {
  text-align: right;
}
</style>

